import React, { useState, useEffect } from 'react'
import '../../Order_management/Component/Css/Order.css'

import { UserOutlined } from '@ant-design/icons';


import { Button, Form, Input, Select, Space, DatePicker } from 'antd';

const { Option } = Select;
const { RangePicker } = DatePicker;


import { getorder } from '../../../../request/api'


export default function Title(props) {
    // useEffect(() => {
    //     allorder()
    // }, [])

    const { name, getTitle } = props
    let [phone, setphone] = useState('')
    let [_id, set_id] = useState('')
    let [consignee, setconsignee] = useState('')
    let [Place_an_order_person, setPlace_an_order_person] = useState('')
    let [Order_status, setOrder_status] = useState('请选择订单状态')


    // 重置搜索
    const onFinish = async () => {
        setphone('')
        set_id('')
        setconsignee('')
        setPlace_an_order_person('')
        setOrder_status('请选择订单状态')
        const data: any = await getorder({})
        getTitle(data.data)
    }

    // const allorder: any = async () => {
    //     let from = {
    //         phone,
    //         _id,
    //         consignee,
    //         Place_an_order_person,
    //         Order_status
    //     }
    //     const data: any = await getorder({ from })
    //     getTitle(data.data)
    // }

    return (
        <div>
            <div className='Title'>
                <Select
                    className='Select'
                    placeholder="所属团长"
                    allowClear
                >
                    <Option value="male">male</Option>
                    <Option value="female">female</Option>
                    <Option value="other">other</Option>
                </Select>
                <Select
                    className='Select'
                    placeholder="团长区域"
                    allowClear
                >
                    <Option value="male">male</Option>
                    <Option value="female">female</Option>
                    <Option value="other">other</Option>
                </Select>

                <Input size="large" placeholder="请输入订单号" prefix='订单号：' value={phone} onChange={(e) => {
                    setphone(e.target.value)
                }} className='user' />
                <Input size="large" placeholder="请输入司机" prefix='司机：' value={_id} onChange={(e) => {
                    set_id(e.target.value)
                }} className='user' />
                <Input size="large" placeholder="请输入姓名" prefix='姓名：' value={consignee} onChange={(e) => {
                    setconsignee(e.target.value)
                }} className='user' />
                <Input size="large" placeholder="请输入收件人" prefix='收件人：' value={Place_an_order_person} onChange={(e) => {
                    setPlace_an_order_person(e.target.value)
                }} className='user' />
                <RangePicker showTime className='ShowTime' onChange={(e) => {
                    console.log(e);
                }} />



                <div >
                    <Button size="large" onClick={() => {
                        onFinish()
                    }}>重置</Button>
                    <Button size="large" onClick={() => {
                        allorder()
                    }
                    } >检索</Button>
                    <Button size="large" style={{ color: 'red', border: '1px solid red' }}>导出</Button>

                </div>
            </div>
        </div>
    )
}
